<#import "../layout/common.html" as com> 

<#assign desc='Decode from or Encode to URL encoded (also known as Percent-encoded) format with Bum online tool.'/>
<#assign keywords='url, decode, decoder, encode, encoder, percent-encoding, online, tool'/>
<@com.page title="URL Decoder and Encoder online tool" pageId="pageDevUrl" data={'css':'dev/dev', 'js':'dev/dev', 'ver':'a00', 'desc':desc, 'keywords':keywords}>

<div class="wrap-space">
	<div class="panel panel-default head-tab">
		<div class="panel-heading">
			<ul class="nav nav-tabs">
				<li><a href="#url-encode-info" data-toggle="tab">URL</a></li>
				<li class="active"><a href="#url-decode" data-toggle="tab">Decode</a></li>
				<li><a href="#url-encode" data-toggle="tab">Encode</a></li>
			</ul>
		</div>
		<div class="tab-content">
			
			<div class="tab-pane active" id="url-decode">
				<div class="tab-heading">
					<div class="title">Decode from URL encoded format</div>
				</div>
				<form class="dev-form" role="form" method="get" action="#">
					<div class="form-group">
						<textarea class="form-control" name="source" rows="4" placeholder="Type or paste here..."></textarea>
					</div>
					<div class="form-group row">
						<div class="col-xs-6">
							<input type="submit" class="btn btn-info btn-block" value="< Decode >"/>
							<input type="hidden" class="act" value="urlDecode"/>
						</div>
						<div class="col-xs-6">
							<select name="charset" class="form-control" title="Select input charset"><option value="UTF-8">UTF-8</option><option value="ASCII">ASCII</option><option value="CP1256">CP1256</option><option value="ISO-8859-1">ISO-8859-1</option><option value="ISO-8859-2">ISO-8859-2</option><option value="ISO-8859-6">ISO-8859-6</option><option value="ISO-8859-15">ISO-8859-15</option><option value="Windows-1252">Windows-1252</option></select>
						</div>
					</div>
					<div class="form-group">
						<textarea class="form-control decode-output" rows="4" placeholder="Result goes here..." ></textarea>
					</div>
				</form>
			</div>
			
			<div class="tab-pane" id="url-encode">
				<div class="tab-heading">
					<div class="title">Encode to URL encoded format</div>
				</div>
				<form class="dev-form" role="form" method="get" action="#">
					<div class="form-group">
						<textarea class="form-control" name="source" rows="4" placeholder="Type or paste here..."></textarea>
					</div>
					<div class="form-group row">
						<div class="col-xs-6">
							<input type="submit" id="encodeButton" class="btn btn-success btn-block" value="> Encode <"/>
							<input type="hidden" class="act" value="urlEncode"/>
						</div>
						<div class="col-xs-6">
							<select name="charset" class="form-control" title="Select output charset"><option value="UTF-8">UTF-8</option><option value="ASCII">ASCII</option><option value="CP1256">CP1256</option><option value="ISO-8859-1">ISO-8859-1</option><option value="ISO-8859-2">ISO-8859-2</option><option value="ISO-8859-6">ISO-8859-6</option><option value="ISO-8859-15">ISO-8859-15</option><option value="Windows-1252">Windows-1252</option></select>
						</div>
					</div>
					<div class="form-group">
						<textarea class="form-control encode-output" rows="4" placeholder="Result goes here..." ></textarea>
					</div>
				</form>
			</div>
			
			<div class="tab-pane" id="url-encode-info">
				<div class="tab-heading">
					<div class="title">URL Encode</div>
				</div>
				<div class="code-about">
					URL encoding, also known as Percent-encoding, is a mechanism for encoding information in a Uniform Resource Identifier (URI) under certain circumstances. Although it is known as URL encoding it is, in fact, used more generally within the main Uniform Resource Identifier (URI) set, which includes both Uniform Resource Locator (URL) and Uniform Resource Name (URN). As such it is also used in the preparation of data of the "application/x-www-form-urlencoded" media type, as is often used in the submission of HTML form data in HTTP requests.
					<br/>
					<br/>
					<b>Types of URI characters</b>
					<br/>
					<br/>The characters allowed in a URI are either reserved or unreserved (or a percent character as part of a percent-encoding). Reserved characters are those characters that sometimes have special meaning. For example, forward slash characters are used to separate different parts of a URL (or more generally, a URI). Unreserved characters have no such meanings. Using percent-encoding, reserved characters are represented using special character sequences. The sets of reserved and unreserved characters and the circumstances under which certain reserved characters have special meaning have changed slightly with each revision of specifications that govern URIs and URI schemes.
					<br/>
					<br/>
					<div class="table-responsive">
					<table class="table table-condensed">
						<caption>RFC 3986 section 2.2 Reserved Characters (January 2005)</caption>
						<tbody>
							<tr>
								<td><code>!</code></td>
								<td><code>*</code></td>
								<td><code>'</code></td>
								<td><code>(</code></td>
								<td><code>)</code></td>
								<td><code>;</code></td>
								<td><code>:</code></td>
								<td><code>@</code></td>
								<td><code>&amp;</code></td>
								<td><code>=</code></td>
								<td><code>+</code></td>
								<td><code>$</code></td>
								<td><code>,</code></td>
								<td><code>/</code></td>
								<td><code>?</code></td>
								<td><code>#</code></td>
								<td><code>[</code></td>
								<td><code>]</code></td>
							</tr>
						</tbody>
					</table>
					</div>
					<div class="table-responsive">
					<table class="table table-condensed">
			            <caption>RFC 3986 section 2.3 Unreserved Characters (January 2005)</caption>
			            <tbody><tr>
			              <td><code>A</code></td>
			              <td><code>B</code></td>
			              <td><code>C</code></td>
			              <td><code>D</code></td>
			              <td><code>E</code></td>
			              <td><code>F</code></td>
			              <td><code>G</code></td>
			              <td><code>H</code></td>
			              <td><code>I</code></td>
			              <td><code>J</code></td>
			              <td><code>K</code></td>
			              <td><code>L</code></td>
			              <td><code>M</code></td>
			              <td><code>N</code></td>
			              <td><code>O</code></td>
			              <td><code>P</code></td>
			              <td><code>Q</code></td>
			              <td><code>R</code></td>
			              <td><code>S</code></td>
			              <td><code>T</code></td>
			              <td><code>U</code></td>
			              <td><code>V</code></td>
			              <td><code>W</code></td>
			              <td><code>X</code></td>
			              <td><code>Y</code></td>
			              <td><code>Z</code></td>
			            </tr>
			            <tr>
			              <td><code>a</code></td>
			              <td><code>b</code></td>
			              <td><code>c</code></td>
			              <td><code>d</code></td>
			              <td><code>e</code></td>
			              <td><code>f</code></td>
			              <td><code>g</code></td>
			              <td><code>h</code></td>
			              <td><code>i</code></td>
			              <td><code>j</code></td>
			              <td><code>k</code></td>
			              <td><code>l</code></td>
			              <td><code>m</code></td>
			              <td><code>n</code></td>
			              <td><code>o</code></td>
			              <td><code>p</code></td>
			              <td><code>q</code></td>
			              <td><code>r</code></td>
			              <td><code>s</code></td>
			              <td><code>t</code></td>
			              <td><code>u</code></td>
			              <td><code>v</code></td>
			              <td><code>w</code></td>
			              <td><code>x</code></td>
			              <td><code>y</code></td>
			              <td><code>z</code></td>
			            </tr>
			            <tr>
			              <td><code>0</code></td>
			              <td><code>1</code></td>
			              <td><code>2</code></td>
			              <td><code>3</code></td>
			              <td><code>4</code></td>
			              <td><code>5</code></td>
			              <td><code>6</code></td>
			              <td><code>7</code></td>
			              <td><code>8</code></td>
			              <td><code>9</code></td>
			              <td><code>-</code></td>
			              <td><code>_</code></td>
			              <td><code>.</code></td>
			              <td><code>~</code></td>
			              <td colspan="13"></td>
			            </tr>
			        </tbody></table>
			        </div>
					Other characters in a URI must be percent encoded.
					<br/>
					<br/><b>Percent-encoding reserved characters</b>
					<br/>
					<br/>When a character from the reserved set (a "reserved character") has special meaning (a "reserved purpose") in a certain context, and a URI scheme says that it is necessary to use that character for some other purpose, then the character must be percent-encoded. Percent-encoding a reserved character involves converting the character to its corresponding byte value in ASCII and then representing that value as a pair of hexadecimal digits. The digits, preceded by a percent sign ("%"), are then used in the URI in place of the reserved character. (For a non-ASCII character, it is typically converted to its byte sequence in UTF-8, and then each byte value is represented as above.)
					<br/>
					<br/>The reserved character "/", for example, if used in the "path" component of a URI, has the special meaning of being a delimiter between path segments. If, according to a given URI scheme, "/" needs to be in a path segment, then the three characters "%2F" or "%2f" must be used in the segment instead of a raw "/".
					<br/>
					<br/>
					<div class="table-responsive">
					<table class="table table-condensed">
						<caption>Reserved characters after percent-encoding</caption>
						<tbody>
							<tr>
								<td><code>!</code>
								</td>
								<td><code>#</code>
								</td>
								<td><code>$</code>
								</td>
								<td><code>&amp;</code>
								</td>
								<td><code>'</code>
								</td>
								<td><code>(</code>
								</td>
								<td><code>)</code>
								</td>
								<td><code>*</code>
								</td>
								<td><code>+</code>
								</td>
								<td><code>,</code>
								</td>
								<td><code>/</code>
								</td>
								<td><code>:</code>
								</td>
								<td><code>;</code>
								</td>
								<td><code>=</code>
								</td>
								<td><code>?</code>
								</td>
								<td><code>@</code>
								</td>
								<td><code>[</code>
								</td>
								<td><code>]</code>
								</td>
							</tr>
							<tr>
								<td><code>%21</code>
								</td>
								<td><code>%23</code>
								</td>
								<td><code>%24</code>
								</td>
								<td><code>%26</code>
								</td>
								<td><code>%27</code>
								</td>
								<td><code>%28</code>
								</td>
								<td><code>%29</code>
								</td>
								<td><code>%2A</code>
								</td>
								<td><code>%2B</code>
								</td>
								<td><code>%2C</code>
								</td>
								<td><code>%2F</code>
								</td>
								<td><code>%3A</code>
								</td>
								<td><code>%3B</code>
								</td>
								<td><code>%3D</code>
								</td>
								<td><code>%3F</code>
								</td>
								<td><code>%40</code>
								</td>
								<td><code>%5B</code>
								</td>
								<td><code>%5D</code>
								</td>
							</tr>
						</tbody>
					</table>
					</div>
					Reserved characters that have no reserved purpose in a particular context may also be percent-encoded but are not semantically different from those that are not.
					<br/>
					<br/>In the "query" component of a URI (the part after a ? character), for example, "/" is still considered a reserved character but it normally has no reserved purpose, unless a particular URI scheme says otherwise. The character does not need to be percent-encoded when it has no reserved purpose.
					<br/>
					<br/>URIs that differ only by whether a reserved character is percent-encoded or appears literally are normally considered not equivalent (denoting the same resource) unless it can be determined that the reserved characters in question have no reserved purpose. This determination is dependent upon the rules established for reserved characters by individual URI schemes.
					<br/>
					<br/><b>Percent-encoding unreserved characters</b>
					<br/>
					<br/>Characters from the unreserved set never need to be percent-encoded.
					<br/>
					<br/>URIs that differ only by whether an unreserved character is percent-encoded or appears literally are equivalent by definition, but URI processors, in practice, may not always recognize this equivalence. For example, URI consumers shouldn't treat "%41" differently from "A" or "%7E" differently from "~", but some do. For maximum interoperability, URI producers are discouraged from percent-encoding unreserved characters.
					<br/>
					<br/><b>Percent-encoding the percent character</b>
					<br/>
					<br/>Because the percent ("%") character serves as the indicator for percent-encoded octets, it must be percent-encoded as "%25" for that octet to be used as data within a URI.
					<br/>
					<br/><b>Percent-encoding arbitrary data</b>
					<br/>
					<br/>Most URI schemes involve the representation of arbitrary data, such as an IP address or file system path, as components of a URI. URI scheme specifications should, but often don't, provide an explicit mapping between URI characters and all possible data values being represented by those characters.
					<br/>
					<br/><b>Binary data</b>
					<br/>
					<br/>Since the publication of RFC 1738 in 1994 it has been specified[1] that schemes that provide for the representation of binary data in a URI must divide the data into 8-bit bytes and percent-encode each byte in the same manner as above. Byte value 0F (hexadecimal), for example, should be represented by "%0F", but byte value 41 (hexadecimal) can be represented by "A", or "%41". The use of unencoded characters for alphanumeric and other unreserved characters is typically preferred as it results in shorter URLs.
					<br/>
					<br/><b>Character data</b>
					<br/>
					<br/>The procedure for percent-encoding binary data has often been extrapolated, sometimes inappropriately or without being fully specified, to apply to character-based data. In the World Wide Web's formative years, when dealing with data characters in the ASCII repertoire and using their corresponding bytes in ASCII as the basis for determining percent-encoded sequences, this practice was relatively harmless; it was just assumed that characters and bytes mapped one-to-one and were interchangeable. The need to represent characters outside the ASCII range, however, grew quickly and URI schemes and protocols often failed to provide standard rules for preparing character data for inclusion in a URI. Web applications consequently began using different multi-byte, stateful, and other non-ASCII-compatible encodings as the basis for percent-encoding, leading to ambiguities and difficulty interpreting URIs reliably.
					<br/>
					<br/>For example, many URI schemes and protocols based on RFCs 1738 and 2396 presume that the data characters will be converted to bytes according to some unspecified character encoding before being represented in a URI by unreserved characters or percent-encoded bytes. If the scheme does not allow the URI to provide a hint as to what encoding was used, or if the encoding conflicts with the use of ASCII to percent-encode reserved and unreserved characters, then the URI cannot be reliably interpreted. Some schemes fail to account for encoding at all, and instead just suggest that data characters map directly to URI characters, which leaves it up to implementations to decide whether and how to percent-encode data characters that are in neither the reserved nor unreserved sets.
					<br/>
					<br/>
					<div class="table-responsive">
					<table class="table table-condensed">
						<caption>Reserved characters after percent-encoding</caption>
						<tbody><tr>
							<td><code>!</code></td>
							<td><code>#</code></td>
							<td><code>$</code></td>
							<td><code>&amp;</code></td>
							<td><code>'</code></td>
							<td><code>(</code></td>
							<td><code>)</code></td>
							<td><code>*</code></td>
							<td><code>+</code></td>
							<td><code>,</code></td>
							<td><code>/</code></td>
							<td><code>:</code></td>
							<td><code>;</code></td>
							<td><code>=</code></td>
							<td><code>?</code></td>
							<td><code>@</code></td>
							<td><code>[</code></td>
							<td><code>]</code></td>
						</tr>
						<tr>
							<td><code>%21</code></td>
							<td><code>%23</code></td>
							<td><code>%24</code></td>
							<td><code>%26</code></td>
							<td><code>%27</code></td>
							<td><code>%28</code></td>
							<td><code>%29</code></td>
							<td><code>%2A</code></td>
							<td><code>%2B</code></td>
							<td><code>%2C</code></td>
							<td><code>%2F</code></td>
							<td><code>%3A</code></td>
							<td><code>%3B</code></td>
							<td><code>%3D</code></td>
							<td><code>%3F</code></td>
							<td><code>%40</code></td>
							<td><code>%5B</code></td>
							<td><code>%5D</code></td>
						</tr></tbody>
					</table>
					</div>
					Arbitrary character data is sometimes percent-encoded and used in non-URI situations, such as for password obfuscation programs, or other system-specific translation protocols.
					<br/>
					<br/>Source: <a href="http://en.wikipedia.org/wiki/Percent-encoding" target="_blank" title="Wikipedia">Wikipedia</a>
				</div>

			</div>
		</div>
	</div>
	
	<#include "../home/bum/box-dev.html"/>
</div>

</@com.page>